<template>
  <cs-card v-loading="tableLoadingStatus">
    <el-table
      ref="multipleTable"
      :data="newsTableData.list"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      @filter-change="typeFilterTag"
      class="contentTable_G"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="firstTitle" label="新闻标题" width="360">
      </el-table-column>
      <el-table-column
        prop="categories"
        label="新闻类型"
        width="360"
        :filters="getTypeFilters"
        column-key="newsType"
      >
        <template v-slot="scoped">
          <div v-if="scoped.row.categories">
            <el-tag
              v-for="(item, index) in scoped.row.categories"
              :key="index"
              >{{ item.label }}</el-tag
            >
          </div>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="发布人" width="200" prop="publisher">
      </el-table-column>
      <el-table-column prop="views" label="浏览量" width="180">
      </el-table-column>
      <el-table-column prop="publishTime" label="发布时间" width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        :filters="statusFilters"
        column-key="status"
        :filter-multiple="false"
      >
        <template v-slot="scoped">
          <el-switch
            v-model="scoped.row.status"
            active-color="#006EFF"
            inactive-color="#DDDDDD"
            class="switchStyle_G"
            :active-value="1"
            :inactive-value="0"
            :disabled="isNewsStatusDisabled"
            @change="newsStatusChangeEvent($event, scoped.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template v-slot="scoped">
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="newsDetailLinkClick(scoped.row.id)"
            >详情</el-link
          >
          <el-link
            type="primary"
            class="el-linkRightMargin_G"
            @click="newsAlterLinkClick(scoped.row.id)"
            >修改</el-link
          >
          <el-link type="primary" @click="deleteNewsLinkClick(scoped.row.id)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination_section_G">
      <span class="currentSelect_G">{{
        `共${newsTableData.totalCount}项`
      }}</span>
      <div class="pagination_right_G">
        <span>{{ `${newsTableData.pageSize}条/页` }}</span>
        <cs-pagination
          :currentPage="newsTableData.currentPage"
          :totalPage="newsTableData.totalPage"
          @firstPageClick="firstPageClick"
          @previousPageClick="previousPageClick"
          @nextPageClick="nextPageClick"
          @lastPageClick="lastPageClick"
          @junkToOtherPage="junkToOtherPage"
        />
      </div>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";

import { mapState } from "vuex";

export default {
  name: "AdTable",
  components: {
    CsCard,
    CsPagination,
  },
  props: {
    newsTableData: {
      type: Object,
      require: true,
    },
    isNewsStatusDisabled: {
      type: Boolean,
      default: false,
    },
    tableLoadingStatus: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      typeFilters: [],
      statusFilters: [
        { text: "开启", value: 1 },
        { text: "关闭", value: 0 },
      ],
      newsTypeFilterValue: [],
    };
  },
  created() {},
  computed: {
    ...mapState("news", ["newsTypeData"]),
    getTypeFilters() {
      if (this.newsTypeData) {
        this.typeFilters = [];
        this.newsTypeData.forEach((item) => {
          this.typeFilters.push({ value: item.id, text: item.label });
        });
        return this.typeFilters;
      }
    },
  },
  methods: {
    // 新闻详情链接点击事件
    newsDetailLinkClick(id) {
      this.$router.push({ path: "/newsDetail", query: { id } });
    },
    // 第一页按钮点击
    firstPageClick() {
      this.$emit("firstPageClick");
    },
    // 上一页按钮点击
    previousPageClick() {
      this.$emit("previousPageClick");
    },
    // 下一页按钮点击
    nextPageClick() {
      this.$emit("nextPageClick");
    },
    // 最后一页按钮点击
    lastPageClick() {
      this.$emit("lastPageClick");
    },
    // 输入页数跳转
    junkToOtherPage(pageNum) {
      this.$emit("junkToOtherPage", pageNum);
    },
    // 新闻修改链接点击事件
    newsAlterLinkClick(id) {
      this.$router.push({ path: "/alterNews", query: { id } });
    },
    typeFilterTag(filters) {
      this.$emit("filterChange", filters);
    },
    // 改变新闻状态按钮点击事件
    newsStatusChangeEvent(status, id) {
      this.$emit("newsStatusChangeEvent", status, id);
    },
    // 删除广告链接点击事件
    deleteNewsLinkClick(id) {
      this.$emit("deleteNewsLinkClick", id);
    },
  },
};
</script>

<style lang="sass" scoped></style>
